import './Header.scss'
import { useState, useRef, useEffect, useContext } from 'react'
import createTo from '../../../../../stores/contextTodoList'
const Header = (props) => {
  const content = useContext(createTo)
  const inputDate = useRef(null)
  useEffect(() => {
    inputDate.current.focus()
  }, [])
  const [userinfo, setUserinfo] = useState({ name: '', date: '', priority: '' })
  // 日期
  const handDate = (e) => {
    setUserinfo({ ...userinfo, date: e.target.value })
  }
  // 姓名
  const handName = (e) => {
    setUserinfo({ ...userinfo, name: e.target.value })
  }
  // 优先级
  const handPriority = (e) => {
    setUserinfo({ ...userinfo, priority: e.target.value })
  }
  return (
    <div>
      {' '}
      <div className="date">
        <span> 日期： </span>
        <input
          ref={inputDate}
          type="text"
          onChange={handDate}
          placeholder="请输入日期"
        />
      </div>
      <div className="title">
        <span> 标题： </span>
        <input type="text" onChange={handName} placeholder="请输入标题" />
      </div>
      <div className="priority">
        <span> 优先级： </span>
        <input type="text" onChange={handPriority} placeholder="请输入优先级" />
      </div>
      <div className="btnAdd">
        <button onClick={() => content.updateList(userinfo)}> 添加 </button>
      </div>
    </div>
  )
}

export default Header
